<template>
  <div class="dialog">
    <!-- 络筒弹窗控件 -->
    <el-dialog
      width="60%"
      class="lt-dialog"
      :visible.sync="Dialog"
      @close="closeDialog"
      append-to-body
      :close-on-click-modal="false"
    >
      <div slot="title" class="clearfix">
        <div class="title">
          <img class="title_img" src="../../../../../assets/img/icon.png" alt="" srcset="" />
          <span class="title_left">{{ title_l }}</span>
        </div>
        <span class="title_top">{{ title }}</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="7">
          <div class="row1">
            <span class="row1title">整车运行时间</span>
            <span class="row1value">{{ secondsFormat(zjkcsj) }}</span>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="row1">
            <span class="row1title">整车状态</span>
            <span class="row1value" :style="{ color: getHeadColor(data.stateCode) }">{{stateCode }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table
            row-key="id"
            class="fixed-table"
            ref="table"
            v-loading="isLoading"
            :data="tableDataRow1"
            style="width: 100%"
            max-height="300"
            lazy
            :load="load"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          >
            <el-table-column label="锭号" fixed="left" width="150">
              <template slot-scope="{ row }">
                <el-row v-if="Array.isArray(row['ds'])" type="flex" align="middle" justify="center">
                  <div v-html="getSeiresDs(row['ds'])"></div>
                </el-row>
                <span v-else>{{ row["ds"] }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="time" label="络纱时间" width="200"></el-table-column>
            <el-table-column prop="dc" label="当前长度"></el-table-column>
            <el-table-column prop="pz" label="品种"></el-table-column>
            <el-table-column prop="dqbc" label="当前班产"></el-table-column>
            <el-table-column prop="bc" label="班长"></el-table-column>
<!--            <el-table-column prop="xl" label="效率"></el-table-column>-->
            <el-table-column prop="cx" label="长细"></el-table-column>
            <el-table-column prop="mj" label="棉结"></el-table-column>
            <el-table-column prop="dc" label="短粗"></el-table-column>
            <el-table-column prop="nj" label="捻结"></el-table-column>
            <el-table-column prop="xh" label="循环"></el-table-column>
            <el-table-column prop="qc" label="切疵"></el-table-column>
            <el-table-column prop="yj" label="验结"></el-table-column>
            <el-table-column prop="hg" label="换管"></el-table-column>
            <el-table-column prop="cz" label="错支"></el-table-column>
            <el-table-column prop="xq" label="系统切"></el-table-column>
            <el-table-column prop="yx" label="异纤"></el-table-column>
            <el-table-column prop="mt" label="满桶"></el-table-column>
            <el-table-column prop="cc" label="长粗"></el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="14">
          <el-row style="margin-top: 10px">
            <img src="../../../../../assets/img/zjgh.svg" alt="" srcset="" />
          </el-row>
          <el-row>
            <el-table border :data="tableData" style="width: 100%" height="150" size="mini">
              <el-table-column prop="code" label="专件编码"></el-table-column>
              <el-table-column prop="desc" label="专件描述"></el-table-column>
              <el-table-column prop="date" label="上车时间" width="160px"></el-table-column>
              <el-table-column prop="num" label="数量"></el-table-column>
              <el-table-column prop="day" label="剩余天数"></el-table-column>
            </el-table>
          </el-row>
        </el-col>
        <el-col :span="10">
          <el-row style="margin-top: 10px">
            <img src="../../../../../assets/img/whjh.svg" alt="" srcset="" />
          </el-row>
          <el-row>
            <el-table border :data="table1Data" style="width: 100%" height="150" size="mini">
              <el-table-column prop="whlx" label="维护类型" width="120px"></el-table-column>
              <el-table-column prop="dqjh" label="当前计划" width="160px"></el-table-column>
              <el-table-column prop="sfwc" label="是否完成"></el-table-column>
              <el-table-column prop="xcjh" label="下次计划" width="160px"></el-table-column>
            </el-table>
          </el-row>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import MES from "@/utils/mesUtils";
export default {
  name: "dialog_luotong",
  data() {
    return {
      Dialog: false,
      title: "",
      title_l: "",
      data: "",
      stateCode: "",
      zjkcsj: 0,
      info: {},
      isLoading: true,
      xiaoLv: 0,
      groupData: [],
      itemData: [],
      tableDataRow1: [],
      tableData: [
        {
          code: "LK101",
          desc: "络筒",
          date: "2021-08-03 15:20:06",
          num: 100,
          day: 5
        },
        {
          code: "ZK102",
          desc: "络筒",
          date: "2021-08-03 15:20:06",
          num: 100,
          day: 5
        },

        {
          code: "LK103",
          desc: "络筒",
          date: "2021-08-03 15:20:06",
          num: 100,
          day: 5
        },

        {
          code: "ZK104",
          desc: "络筒",
          date: "2021-08-03 15:20:06",
          num: 100,
          day: 5
        }
      ],
      table1Data: [
        {
          whlx: "保养及维护",
          dqjh: "2021-07-31",
          sfwc: "否",
          xcjh: "2021-07-31"
        },
        {
          whlx: "保养及维护",
          dqjh: "2021-07-31",
          sfwc: "否",
          xcjh: "2021-07-31"
        },
        {
          whlx: "保养及维护",
          dqjh: "2021-07-31",
          sfwc: "否",
          xcjh: "2021-07-31"
        },
        {
          whlx: "保养及维护",
          dqjh: "2021-07-31",
          sfwc: "否",
          xcjh: "2021-07-31"
        },
        {
          whlx: "保养及维护",
          dqjh: "2021-07-31",
          sfwc: "否",
          xcjh: "2021-07-31"
        }
      ]
    };
  },

  mounted() {},
  computed: {
    luoTongNewestState() {
      return this.$store.state.luoTongNewestState;
    },
    luoTongGroupState1() {
      return this.$store.state.luoTongGroupState1;
    }
  },
  watch: {
    luoTongNewestState: {
      immediate: true,
      handler(val) {
        if (val.code == -1) {
          this.$message("查询数据失败！");
          this.closeDialog();
        } else if (val.code == 1) {
          let { data } = val;
          data.forEach((item, index) => {
            item.id = index;
            item.hasChildren = true;
          });
          this.tableDataRow1 = data;
          this.isLoading = false;
          // this.itemData = this.groupItemUtils(val.data);
          // this.zjkcsj = val.data.zjkcsj;
        }
        // this.$nextTick(() => {
        //   this.init();
        //   this.$refs.table.doLayout();
        // });
      }
    }
    // luoTongGroupState1: {
    //   immediate: true,
    //   handler(val) {
    //     console.log(val);
    //     if (val.code == -1) {
    //       this.$message("查询数据失败！");
    //       this.closeDialog();
    //     } else if (val.code == 1) {
    //       this.tableDataRow1 = this.groupUtils(val.data);
    //       this.$refs.table.doLayout();
    //       this.isLoading = false;
    //     }
    //   }
    // }
  },
  methods: {
    secondsFormat(s) {
      var day = Math.floor(s / (24 * 3600)); // Math.floor()向下取整
      var hour = Math.floor((s - day * 24 * 3600) / 3600);
      var minute = Math.floor((s - day * 24 * 3600 - hour * 3600) / 60);
      var second = s - day * 24 * 3600 - hour * 3600 - minute * 60;
      if (hour) {
        return hour + "时" + minute + "分" + second + "秒";
      } else {
        if (second < 10) {
          if (minute < 10) {
            return "0" + minute + "分" + second + "0秒";
          } else {
            return minute + "分" + second + "0秒";
          }
        } else {
          return minute + "分" + second + "0秒";
        }
      }
    },
    load(tree, treeNode, resolve) {
      MES.queryNewestLuoTongDetail1({ pz: tree.pz, devSn: this.data.devSn }).then((res) => {
        if (res.code == 1) {
          let { data } = res;
          data.forEach((item, index) => {
            item.id = "child" + index;
          });
          resolve(data);
        } else {
          resolve([]);
        }
      });
    },
    //明细工具类
    groupItemUtils(obj) {
      console.log("obj=====", obj);
      var itemList = [];
      for (var i = 1; i <= 64; i++) {
        var list = {
          id: "id" + i,
          no: "第" + i + "锭",
          lssj: obj.lssj ? this.secondsFormat(eval("(" + obj.lssj + ")")["lssj" + i]) : "",
          cx: eval("(" + obj.cx + ")")["cx" + i],
          pz: obj.pz,
          dqbc: obj.dqbc,
          mj: eval("(" + obj.mj + ")")["mj" + i],
          dc: eval("(" + obj.dc + ")")["dc" + i],
          nj: eval("(" + obj.nj + ")")["nj" + i],
          xh: eval("(" + obj.xh + ")")["xh" + i],
          qc: eval("(" + obj.qc + ")")["qc" + i],
          yj: eval("(" + obj.yj + ")")["yj" + i],
          hg: eval("(" + obj.hg + ")")["hg" + i],
          cz: eval("(" + obj.cz + ")")["cz" + i],
          xtq: eval("(" + obj.xq + ")")["xq" + i],
          yx: eval("(" + obj.yx + ")")["yx" + i],
          mt: eval("(" + obj.mt + ")")["mt" + i],
          cc: eval("(" + obj.cc + ")")["cc" + i],
          bc: eval("(" + obj.bc + ")")["bc" + i],
          xl: (Number(eval("(" + obj.xl + ")")["xl" + i]) * 100).toFixed(0) + "%"
        };
        itemList.push(list);
      }
      this.isLoading = false;
      return itemList;
    },
    //分组工具类
    groupUtils(obj) {
      var tableDataRow1 = [];

      for (var i = 1; i <= 4; i++) {
        var no = "";
        if (i == 1) {
          no = "第一分组 (1锭 ~ 16锭)品种:络筒";
        } else if (i == 2) {
          no = "第二分组 (17锭 ~ 32锭)品种:络筒";
        } else if (i == 3) {
          no = "第三分组 (33锭 ~ 48锭)品种:络筒";
        } else if (i == 4) {
          no = "第四分组 (49锭 ~ 64锭)品种:络筒";
        }
        var key = "sum" + i;
        var list = {
          id: i,
          lssj: "",
          no: no,
          pz: obj.pz,
          dqbc: obj.dqbc,
          cx: obj.cx[key],
          mj: obj.mj[key],
          dc: "",
          nj: obj.nj[key],
          xh: obj.xh[key],
          qc: obj.qc[key],
          yj: obj.yj[key],
          hg: obj.hg[key],
          cz: obj.cz[key],
          xtq: obj.xtq[key],
          yx: obj.yx[key],
          mt: obj.mt[key],
          cc: obj.cc[key],
          bc: obj.bc[key],
          xl: (Number(obj.xl) * 100).toFixed(2) + "%",
          hasChildren: true
        };
        console.log(list);
        tableDataRow1.push(list);
      }

      return tableDataRow1;
    },
    // 获取连续Ds
    getSeiresDs(arr) {
      var result = [],
        i = 0,
        str = "";
      if (arr.length > 0) {
        result[i] = [arr[0]];
        arr.reduce(function (prev, cur) {
          parseInt(cur) - parseInt(prev) == 1 ? result[i].push(cur) : (result[++i] = [cur]);
          return cur;
        });
        result.map((item) => {
          if (item.length > 1) {
            str += `${item[0]} - ${item[item.length - 1]}锭、`;
          } else {
            str += `#${item[0]}锭、`;
          }
        });
        str = str.substring(0, str.length - 1);
      } else {
        str = "";
      }
      return str;
    },
    //尾灯表示车台状态（运行、停止、故障、满纱满桶、通讯失败)
    getHeadColor(status) {
      switch (parseInt(status)) {
        //运行
        case 1:
          return "#02DE6D";
        //停止
        case 2:
          return "#FF3C00";
        //故障
        case 3:
          return "#FF9902";
        //满纱满桶
        case 4:
          return "#00D8D3";
        //通讯失败
        case 5:
          return "#B8B8B8";
        // 计划停台
        case 6:
          return "rgb(255,233,34)";
        default:
          return "#B8B8B8";
      }
    },
    getHeadName(stateCode) {
      switch (parseInt(stateCode)) {
        //运行
        case 1:
          return "运行";
        //停止
        case 2:
          return "停止";
        //故障
        case 3:
          return "故障";
        //满纱满桶
        case 4:
          return "满纱满桶";
        //通讯失败
        case 5:
          return "通讯故障";
        // 计划停台
        case 6:
          return "计划停台";
        default:
          return "通讯故障";
      }
    },
    showDialog(data) {
      this.data = data;
      this.title_l = "络筒" + data.devSn;
      this.title = "VCRO-I 络筒" + data.devSn + "详情";
      this.xiaoLv = Number(data.xiaolv) * 100;
      this.stateCode = this.getHeadName(data.stateCode);
      this.Dialog = true;
      // this.$nextTick(() => {
      //   this.init();
      // });
    },
    closeDialog() {
      this.Dialog = false;
      this.isLoading = true;
      this.zjkcsj = 0;
      this.itemData.splice(0, this.itemData.length);
      this.tableDataRow1.splice(0, this.tableDataRow1.length);
      this.$parent.closeHandle("secLuoTongTimer");
    },
    init() {
      if (this.$refs.lulotongEcharts) {
        var lulotongEcharts = this.$echarts.init(this.$refs.lulotongEcharts);
        var option = {
          series: [
            {
              type: "gauge",

              center: ["50%", "50%"],
              radius: "90%",
              min: 0,
              max: 100,
              itemStyle: {
                color: "#58D9F9",
                shadowColor: "rgba(0,138,255,0.45)",
                shadowBlur: 10,
                shadowOffsetX: 2,
                shadowOffsetY: 2
              },
              axisLine: {
                roundCap: true,
                lineStyle: {
                  width: 15,
                  color: [[1, "#1D3E52"]]
                }
              },

              progress: {
                roundCap: true,
                show: true,
                width: 18
              },

              axisTick: {
                show: true
              },
              splitLine: {
                show: false,
                length: 15
              },

              axisLabel: {
                distance: 5,
                color: "#62C6F3",
                fontSize: 9
              },
              anchor: {
                show: false
              },

              title: {
                offsetCenter: [0, "85%"],
                fontSize: 20,
                color: "#58D9F9"
              },
              detail: {
                valueAnimation: true,
                fontSize: 28,
                fontFamily: "electronicFont",
                offsetCenter: [0, "60%"],
                color: "rgb(241,241,64)",
                formatter: function (value) {
                  return Math.round(value) + "%";
                }
              },

              data: [
                {
                  name: "效率",
                  value: this.xiaoLv
                }
              ]
            }
          ]
        };

        lulotongEcharts.setOption(option);
        window.addEventListener("resize", function () {
          lulotongEcharts.resize();
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 5px;
  &:last-child {
    margin-bottom: 0;
  }
}
.echarts {
  width: 100%;
  height: 200px;
}
.title {
  color: rgb(111, 155, 184);
}
</style>

<style lang="scss">
.lt-dialog {
  .el-dialog__body .el-table.fixed-table .el-table__row td {
    height: 44px;
    padding: 0;
  }
  .el-table__fixed {
    box-shadow: 0 2px 10px rgb(0 0 0) !important;
  }
}
</style>
